<template>
    <div class="conveyor-belt-test">
      <el-card style="margin-top: 30px; background-color: #2B2B2B; color: #9E9F9F; border: solid 1px #9E9F9F; text-align: left;border: 5px groove #b15b2e;padding:3px">
        <div slot="header" style="width: 100%; height: 10px;line-height: 10px; font-size: 15px; text-align: center">
          <span>传送带测试</span>
        </div>
        <div style="background-color: #2B2B2B">
          <div style="margin-top: 5px">
            <label for="distance">传送带当前距离:</label>
            <span id="distance" v-text="distance.distance"></span>
          </div>
          <div style="margin-top: 5px">
            <label for="direction">方向:</label>
            <span id="direction" v-text="distance.direction"></span>
          </div>
        </div>
        <div style="margin-top: 10px">
            <label for="conveyor-operation">传送带操作:</label>

            <div id="conveyor-operation" style="margin-top: 10px">
              <el-input v-model="form.distance" placeholder="placeholder" size="mini" style="margin-top: 5px"></el-input>
              <div style="text-align: center;margin-top: 10px">
                <el-button type="primary" @click="sendDistance" size="mini">启动</el-button>
                <el-button type="primary" @click="stopConveyor" size="mini">急停</el-button>
                <el-button type="primary" @click="resetStartPoint" size="mini">重置</el-button>
              </div>
            </div>
          </div>
      </el-card>

    </div>
</template>

<script>
  import MessageBox from './LogBoard/MessageBox'
  import axios from 'axios'
  import {mapState} from 'vuex'
    export default {
        name: "ConveyorBeltTest",
        components:{
          MessageBox
        },
        data(){
          return {
            distance: "",
            activeNames: [],
            form: {
              'distance': 0,
            },
            statusAction: "",
          }
        },

        methods: {
          handleChange(name){
            console.log(name)
          },
          onSubmit(){

          },
          getStatus(){
            axios
              .get('http://127.0.0.1:8000/test/get_conveyor_status')
              .then((response) =>{
                this.distance = response.data
              })
          },
          sendDistance(){
            let url = 'http://127.0.0.1:8000/test/send_distance'
            url += `?distance=${this.form.distance}`
            axios
              .get(url)
              .then((res)=>{
                if (res.data) {
                  this.$message({
                    message: '移动成功',
                    type: 'success'
                  });
                }else{
                  this.$message({
                    message: '移动失败',
                    type: 'error'
                  });
                }
              })
          },
          stopConveyor(){
            axios
              .get('http://127.0.0.1:8000/test/stop_conveyor')
              .then((res)=>{
                if (res.data) {
                  this.$message({
                    message: '停止成功',
                    type: 'success'
                  });
                }else{
                  this.$message({
                    message: '停止失败',
                    type: 'error'
                  });
                }
              })
          },
          resetStartPoint(){
            axios
              .get('http://127.0.0.1:8000/test/reset_start_point')
          }
        },
        mounted() {
          // this.statusAction = setInterval(this.getStatus, 1000)
        },

      computed: {
          ...mapState([
            'ws',
            'msgList',
          ])
      },
      destroyed() {
          clearInterval(this.statusAction)
      }
    }
</script>

<style scoped>

.conveyor-belt-test {

}

</style>
